<template>
    <div style="margin:20px;padding:20px;background-color:#fff;">
        <h3>模块管理</h3>
        <el-button type="text" @click="addNodeShow = true" size="medium" style="float:right">添加根菜单</el-button>
        <div style="clear:both">
            <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                        <i class="el-ali-url" v-if="data.type != 1"></i>
                        <i class="el-ali-api" v-else></i>
                        {{ data.name }}
                        {{ data.sort }}
                    </span>
                    <span>
                    <el-button
                        v-if="data.type != 1"
                        type="text"
                        size="small"
                        @click="() => append(data)">
                        添加
                    </el-button>
                    <el-button
                        type="text"
                        size="small"
                        @click="() => write(data)">
                        修改
                    </el-button>
                    <el-button
                        type="text"
                        size="small"
                        @click="() => remove(node, data)">
                        删除
                    </el-button>
                    </span>
                </span>
            </el-tree>
        </div>
        <el-dialog title="添加节点" :visible.sync="addNodeShow" :show-close="false" :close-on-click-modal="false" width="30%">
            <el-form label-width="80px" size="small" label-position="left">
                <el-form-item label="节点类型">
                    <el-select v-model="add_data.type" placeholder="请选择节点类型">
                        <el-option label="菜单" value="0"></el-option>
                        <el-option label="功能" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="节点名">
                    <el-input v-model="add_data.name" style="width:200px;" placeholder="请输入节点名"></el-input>
                </el-form-item>
                <el-form-item label="节点路由" v-if="add_data.type == 0">
                    <el-input v-model="add_data.route" style="width:200px;" placeholder="请输入节点路由"></el-input>
                </el-form-item>
                <el-form-item label="节点API" v-if="add_data.type == 1">
                    <el-input v-model="add_data.action" style="width:200px;" placeholder="请输入节点API"></el-input>
                </el-form-item>
                <el-form-item label="API方法" v-if="add_data.type == 1">
                    <el-input v-model="add_data.method" style="width:200px;" placeholder="请输入节点API"></el-input>
                </el-form-item>
                <el-form-item label="节点图标" v-if="add_data.type == 0">
                    <el-input v-model="add_data.icon" style="width:200px;" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="应用系统">
                    <el-input v-model="add_data.app_id" style="width:200px;" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="父级节点">
                    <el-input v-model="add_data.pid" style="width:200px;" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="add_data.sort" style="width:200px;" placeholder=""></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddNode"  size="small">取 消</el-button>
                <el-button type="primary" @click="addNewNode"  size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                data:[],
                addNodeShow:false,
                add_data:{
                    name:'',
                    route:'',
                    icon:'',
                    action:'',
                    app_id:'0',
                    pid:'0',
                    type:'0',
                    method:'',
                    id:'',
                    sort:'',
                },
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData() {
                this.data = []
                this.$axios({
                    url: this.$url.node,
                    method:'get',
                }).then(response=>{
                    if(response.data.result.success){
                        let content = response.data.content
                        for(let value of content){
                            if(value.pid == 0){
                                this.data.push(value)
                            }else{
                                for(let mid of this.data){
                                    if(mid.id == value.pid){
                                        if (!mid.children) {
                                            this.$set(mid, 'children', []);
                                        }
                                        mid.children.push(value)
                                    }else{
                                        if(!mid.children){
                                        }else{
                                            for(let min of mid.children){
                                                if(min.id == value.pid){
                                                    if (!min.children) {
                                                        this.$set(min, 'children', []);
                                                    }
                                                    min.children.push(value)
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }else{
                        this.$notify.error({
                            title: '错误',
                            message: response.data.result.errorMsg
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            closeAddNode(){
                this.add_data.name = ''
                this.add_data.route = ''
                this.add_data.icon = ''
                this.add_data.action = ''
                this.add_data.app_id = '0'
                this.add_data.pid = '0'
                this.add_data.type = '0'
                this.add_data.method = ''
                this.add_data.id = ''
                this.add_data.sort = ''
                this.addNodeShow = false
            },
            append(data) {
                this.addNodeShow = true
                this.add_data.pid = data.id
            },
            remove(node, data) {
                if(data.children && data.children.length > 0){
                    this.$notify({
                        title: '警告',
                        message: '当前节点存在子节点，请先删除子节点',
                        type: 'warning'
                    });
                }
                this.$confirm('确定删除该节点吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$axios({
                            url: this.$url.node+'/'+data.id,
                            method:'delete',
                        }).then(response=>{
                            if(response.data.result.success){
                                this.$notify({
                                    title: '成功',
                                    message: '节点删除成功',
                                    type: 'success'
                                });
                                this.getData()
                            }else{
                                this.$notify.error({
                                    title: '错误',
                                    message: response.data.result.errorMsg
                                });
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            write(data){
                this.add_data.action = data.action
                this.add_data.icon = data.icon
                this.add_data.id = data.id
                this.add_data.method = data.method
                this.add_data.name = data.name
                this.add_data.pid = data.pid
                this.add_data.route = data.route
                this.add_data.type = data.type.toString()
                this.add_data.sort = data.sort
                this.addNodeShow = true
            },
            addNewNode(){
                if(this.add_data.id == ''){
                    this.$axios({
                        url: this.$url.node,
                        method:'post',
                        data:{
                            name:this.add_data.name,
                            route:this.add_data.route,
                            icon:this.add_data.icon,
                            action:this.add_data.action,
                            app_id:this.add_data.app_id,
                            pid:this.add_data.pid,
                            type:this.add_data.type,
                            method:this.add_data.method,
                            sort:this.add_data.sort,
                        }
                    }).then(response=>{
                        if(response.data.result.success){
                            this.$notify({
                                title: '成功',
                                message: '节点添加成功',
                                type: 'success'
                            });
                            this.getData()
                            this.closeAddNode()
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: response.data.result.errorMsg
                            });
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }else{
                    this.$axios({
                        url: this.$url.node+'/'+this.add_data.id,
                        method:'patch',
                        data:{
                            name:this.add_data.name,
                            route:this.add_data.route,
                            icon:this.add_data.icon,
                            action:this.add_data.action,
                            app_id:this.add_data.app_id,
                            pid:this.add_data.pid,
                            type:this.add_data.type,
                            method:this.add_data.method,
                            sort:this.add_data.sort,
                        }
                    }).then(response=>{
                        if(response.data.result.success){
                            this.$notify({
                                title: '成功',
                                message: '节点修改成功',
                                type: 'success'
                            });
                            this.getData()
                            this.closeAddNode()
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: response.data.result.errorMsg
                            });
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },
            handleDrop(draggingNode, dropNode, dropType, ev){
                console.log(draggingNode, dropNode, dropType, ev)
            },
        },
    }
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>